var srcLink = [
			"img/1.jpg",
			"img/2.jpg",
			"img/3.jpg",
			"img/4.jpg",
			"img/5.jpg"
		]
var i=0;
var scaleNum=1;
var rotateNum=0;
var returnNum=0;

$("li").click(function(){
	i=$(this).index();
	$("body").append("<div class='box'></div>")
	$(".box").append("<div class='sc'>X</div>")
			 .append("<div class='Div'><img class='imgx' src='"+$(this).children().attr("src")+"'</div>")
			 .append("<ul class='Ul'><li class='F'>放大</li><li class='S'>上一张</li><li class='xz'>旋转</li><li class='next'>下一张</li><li class='sx'>缩小</li><li class='scale1'>1:1</li><li class='returnBtn'>反转</li></ul>")

	$('.next').click(function(){
		i++;
		if(i==srcLink.length){
			i=0;
		}
		$('.imgx').attr('src',srcLink[i]);
	});

	$(".sc").click(function(){
		$(this).parent().remove()
	})

//	上一张
	$(".S").click(function(){
		
		
		alert(index[0])
	})
	

//	变大
	$(".F").click(function(){


		var timer=setInterval(function(){
			scaleNum+=0.02;
			$('.scaleNumBox').show().html(parseInt(scaleNum*100)+'%');
			$('.imgx').css('transform','scale('+scaleNum+')');
		},100);

		setTimeout(function(){
			clearInterval(timer);
			$('.scaleNumBox').hide(1000);
		},1000);



	})
//	缩小
	$(".sx").click(function(){
		scaleNum-=0.2;
		if(scaleNum<=0.2){
			scaleNum=0.2;
			return false;
		}
		$('.imgx').css('transform','scale('+scaleNum+')');
	})
	
	$('.scale1').click(function(){
		scaleNum=1;
		$('.imgx').css('transform','scale('+scaleNum+')');
	});


	//	旋转
	
	$(".xz").click(function(){
		rotateNum+=90;
		$('.imgx').css('transform','rotate('+rotateNum+'deg)');	
	});  

	$('.returnBtn').click(function(){
		returnNum+=180;
		$('.imgx').css('transform','rotateY('+returnNum+'deg)');	
	});
})


$(document).on('mousewheel DOMMouseScroll', function (e) {
    //WebKit内核，Trident内核 => mousewheel
    //Gecko内核 => DOMMouseScroll
    e.preventDefault();
    //  原始位置
    var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    //e.originalEvent.wheelDelta => 120(up) or -120(down) 谷歌IE内核
    //e.originalEvent.detail => -3(up) or 3(down) 火狐内核
    var delta = Math.max(-1, Math.min(1, value));
    console.log(delta < 0 ? 'down' : 'up');
    if(delta>0){
        maskout();
    }else{
        maskin();
    }
});

